$theme-color: null;
/* 颜色变量 */
$themes: (
  violet_theme: (
    default_color: #6445D4,
    minor_color: #9B45D4
  ),
  orange_theme: (
    default_color: #ED572E,
    minor_color: #F0AA1F
  ),
  red_theme: (
    default_color: #ED1026,
    minor_color: #E50C0C,
    linear_color: #E41010,
    light_color: #ffefef,
    sign_bg: rgba(228,16,16,0.76),
    qr_bg: #FF4E60,
    header_bg: url('~@/assets/images/header-red-bg.png'),
    rec_ranking_bg: url('~@/assets/images/wallet/ranking-red.png'),
    sign_head_bg: url('~@/assets/images/signIn/h-red-bg.png'),
    sign_gift_bg: url('~@/assets/images/signIn/gift-red.png'),
    sign_rule_head: url('~@/assets/images/signIn/rule-red-head.png'),
    sign_rule_bg: url('~@/assets/images/signIn/rule-red-bg.png'),
    sign_award_bg: url('~@/assets/images/signIn/award-red-bg.png'),
    wallet_recruit_bg: url('~@/assets/images/wallet/recruit-red-bg.png')
  ),
  blue_theme: (
    default_color: #3471DC,
    minor_color: #19BDDE
  ),
  green_theme: (
    default_color: #24BFB0,
    minor_color: #32CE79,
    linear_color: #24BFB0,
    light_color: #E9F8F7,
    deep_color: #005E55,
    sign_bg: #32CE88,
    qr_bg: #32CE88,
    rec_ranking_bg: url('~@/assets/images/wallet/ranking-green.png'),
    sign_head_bg: url('~@/assets/images/signIn/h-green-bg.png'),
    sign_rule_head: url('~@/assets/images/signIn/rule-green-head.png'),
    sign_gift_bg: url('~@/assets/images/signIn/gift-green.png'),
    sign_rule_bg: linear-gradient(360deg, #FFFFFF 0%, #32CE88 100%),
    sign_award_bg: url('~@/assets/images/signIn/award-green-bg.png'),
    wallet_recruit_bg: url('~@/assets/images/wallet/recruit-green-bg.png')
  )
);
//遍历主题map
@mixin theme_each {
  @each $theme-name, $theme-map in $themes {
    $--color-primary: $theme-map;
    $theme-color: $theme-map !global;
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

// 获取导出的主题色
@function get_export_color($name) {
  $theme-name: map-get($themes, $name);
  @return map-get($theme-name, 'default_color');
}

// 获取主题色
@function get_color($key) {
  @return map-get($theme-color, $key);
}

//获取背景颜色
@mixin background_color($alpha: 1) {
  @include theme_each {
    background-color: rgba(get_color('default_color'),$alpha);
  }
}

//获取渐变背景颜色
@mixin background_linear($deg: 90deg, $min: 0%, $max: 100%) {
  @include theme_each {
    background: linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

//获取渐变背景图片和颜色
@mixin background_image($deg: 90deg, $min: 0%, $max: 100%, $url: '') {
  @include theme_each {
    background-image: url($url), linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

// 设置阴影
@mixin box_shadow($x, $y, $blur, $spread: 0, $box: inset) {
  @include theme_each {
    box-shadow: $x $y $blur $spread get_color('default_color') $box;
  }
}

//获取字体颜色
@mixin font_color($color:'default_color') {
  @include theme_each {
    color: get_color($color);
  }
}

//获取边框颜色
@mixin border_color($alpha: 1) {
  @include theme_each {
    border-color: rgba(get_color('default_color'),$alpha);
  }
}

//设置宽高
@mixin wh($w, $h) {
  width: #{$w}px;
  height: #{$h}px;
}

//顶部背景图及颜色
@mixin header_bg($deg, $min, $max) {
  @include theme_each{
    background-image: get_color('header_bg'), linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
  }
}

//充值排行背景图
@mixin rec_ranking_bg() {
  @include theme_each{
    background: get_color('rec_ranking_bg') no-repeat center/cover;
  }
}

//价格
@mixin price($color:#FE341D, $fz: 20, $pz: 12, $fw: '500') {
  position: relative;
  padding-left: 12px;
  display: flex;
  align-items: flex-end;
  &::after {
    content: "￥";
    position: absolute;
    font-size: #{$pz}px;
    left: 0;
    bottom: 2px;
  }
  font-size: #{$fz}px;
  font-weight: #{$fw};
  color: #{$color};
}

@mixin flex_center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin round($size) {
  width: #{$size}px;
  height: #{$size}px;
  border-radius: 100%;
  position: absolute;
}

@mixin model($position: 'absolute') {
  position: #{$position};
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  transition: all .2s;
  &.show {
    z-index: 101;
    opacity: 1;
  }
}

:export {
  violet_theme: get_export_color('violet_theme');
  orange_theme: get_export_color('orange_theme');
  red_theme: get_export_color('red_theme');
  blue_theme: get_export_color('blue_theme');
  green_theme: get_export_color('green_theme');
}
